<template>
  <div id="app">
    <Header isFalse="$route.meta==3"/>
    <div class="container">
      <div class="topIndex">
        <div
          class="sliber"
          style="backgroundcolor: yellow"
          type="text"
          @click="centerDialogVisible = true"
        >
          <img
            src="https://i.zhenai.com/pc/portal/zhenxinMember/images/zhenxin_unlock.1520b33.png"
            alt=""
          />
        </div>
      </div>
      <el-dialog
        title="开通珍心会员"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <div
          style="
            height: 100%,
            display: flex,
            justifyContent: center,
            alignItems: center,
          "
        >
          <img
            style="width: 100%"
            src="../../assets/images/1618812218(1).png"
          />
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false"
            >支付遇到问题</el-button
          >
          <el-button type="primary" @click="centerDialogVisible = false"
            >已完成支付</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="开通珍心会员"
        :visible.sync="centerDialogVisible2"
        width="30%"
        center
      >
        <div
          style="
            height: 100%,
            display: flex,
            justifyContent: center,
            alignItems: center,
          "
        >
          <img
            style="width: 100%"
            src="../../assets/images/1618814061(1).png"
          />
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false"
            >支付遇到问题</el-button
          >
          <el-button type="primary" @click="centerDialogVisible = false"
            >已完成支付</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="开通珍心会员"
        :visible.sync="centerDialogVisible3"
        width="30%"
        center
      >
        <div
          style="
            height: 100%,
            display: flex,
            justifyContent: center,
            alignItems: center,
          "
        >
          <img
            style="width: 100%"
            src="../../assets/images/1618814118(1).png"
          />
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false"
            >支付遇到问题</el-button
          >
          <el-button type="primary" @click="centerDialogVisible = false"
            >已完成支付</el-button
          >
        </span>
      </el-dialog>
      <div class="bottomIndex f0">
        <div class="container-flet yuan">
          <div class="upper-half">
            <div class="cards">
              <div class="box f0">
                <div class="item f1 yuan">
                  <div class="tag">
                    <img
                      class="im"
                      src="https://i.zhenai.com/pc/portal/zhenxinMember/images/tag.0a9341a.png"
                      alt=""
                    />
                  </div>

                  <div class="info">
                    <p class="type">珍心会员12个月</p>
                    <p class="dayPrice">1.06元/天</p>
                    <div class="line"></div>
                    <p class="total">
                      超值会员价
                      <span class="price">388</span>
                      元
                    </p>

                    <el-button
                      class="btn"
                      type="text"
                      @click="centerDialogVisible = true"
                      >立即开通</el-button
                    >
                  </div>
                </div>
                <div class="item f2 yuan">
                  <div class="info">
                    <p class="type">珍心会员3个月</p>
                    <p class="dayPrice">3.8元/天</p>
                    <div class="line"></div>
                    <p class="total">
                      优惠价格
                      <span class="price">348</span>
                      元
                    </p>
                    <el-button
                      class="btn"
                      type="text"
                      @click="centerDialogVisible2 = true"
                      >立即开通</el-button
                    >
                  </div>
                </div>
                <div class="item f2 yuan">
                  <div class="info">
                    <p class="type">珍心会员1个月</p>
                    <p class="dayPrice">8.2元/天</p>
                    <div class="line"></div>
                    <p class="total">
                      优惠价格
                      <span class="price">248</span>
                      元
                    </p>
                    <el-button
                      class="btn"
                      type="text"
                      @click="centerDialogVisible3 = true"
                      >立即开通</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <div class="priovity">
                <div class="title">
                  <div class="border border1"></div>
                  会员权益
                  <div class="border border2"></div>
                </div>
                <div class="ctn f0">
                  <div class="item yuan">
                    <div class="img"></div>
                    <p>解锁你的收件箱</p>
                  </div>
                  <div class="item yuan">
                    <div class="img"></div>
                    <p>解锁消息发送</p>
                  </div>
                  <div class="item yuan">
                    <div class="img"></div>
                    <p>免费畅享直播</p>
                  </div>
                  <div class="item yuan">
                    <div class="img"></div>
                    <p>尊贵珍心会员勋章</p>
                  </div>
                  <div class="item yuan">
                    <div class="img"></div>
                    <p>更多精准筛选条件</p>
                  </div>
                  <div class="item yuan">
                    <div class="img"></div>
                    <p>无限制上传照片</p>
                  </div>
                </div>
              </div>
              <div class="btn" type="text" @click="centerDialogVisible = true">
                <div class="box">
                  立即开通
                  <span class="price">388<span class="small">元/年</span></span>
                </div>
              </div>
              <!-- <el-button
                class="box"
                type="text"
                @click="centerDialogVisible = true"
                >立即开通<span class="price"
                  >388<span class="small">元/年</span></span
                ></el-button >-->

              <div class="des">
                <p class="title">服务说明</p>
                <p>1、购买的服务仅限本账号使用，不能转移到其他账号；</p>
                <p>
                  2、在使用本服务期间，若从事不恰当或不合法的行为，珍爱网保留进行调查并立即终止服务的权利；
                </p>
                <p>
                  3、对于本服务和以上条款，在法律允许范围内珍爱网拥有解释权。
                </p>
                <p class="title sase">安全征婚提示</p>
                <p>
                  在以下情况下请不要轻易透露你的联系方式（如电话、手机号码、邮箱、即时通信、通信地址等）
                </p>
                <p>1、在未充分了解对方前，请不要轻易透露你的联系方式。</p>
                <p>
                  2、当对方无相片或资料不完整时，请不要轻易透露你的联系方式。
                </p>
                <p>
                  3、相亲过程中，如遇对方提及借款、投资或索要等行为，请务必提高警惕，谨防受骗，并及时举报。
                </p>
                <p>
                  4、为保障征婚安全，你需要完成实名人脸认证，才可发送/回复消息。
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="container-right">
          <div class="tuodan">
            <p class="title">
              脱单
              <span class="danger">光荣榜</span>
            </p>
            <div class="ctn">
              <div class="users">
                <div id="j-users" class="swiper-container">
                  <Caroucel />
                </div>
              </div>
            </div>
          </div>
          <div class="member">
            <p class="title">开通珍心会员，快去联系TA们吧</p>

            <div class="like">
              <div class="tradeUser">
                <div class="ImgContainer">
                  <img
                    src="https://photo.zastatic.com/images/photo/463922/1855684997/44701748690645891.png?scrop=1&crop=1&cpos=north&w=100&h=100"
                    alt=""
                  />
                </div>

                <div class="userText">
                  <div class="userTextTitle">
                    <div class="userTextName">需要氧气</div>
                    <div class="icon iconfont iconhuangguanguanjun2x"></div>
                  </div>

                  <p class="attr">37岁&nbsp;&nbsp;&nbsp;168cm</p>

                  <p class="des">身高170体重110,长年健身,希望你也...</p>
                </div>
              </div>

              <div class="tradeUser">
                <div class="ImgContainer">
                  <img
                    src="https://photo.zastatic.com/images/photo/463922/1855684997/44701748690645891.png?scrop=1&crop=1&cpos=north&w=100&h=100"
                    alt=""
                  />
                </div>

                <div class="userText">
                  <div class="userTextTitle">
                    <div class="userTextName">需要氧气</div>
                    <div class="icon iconfont iconhuangguanguanjun2x"></div>
                  </div>

                  <p class="attr">37岁&nbsp;&nbsp;&nbsp;168cm</p>

                  <p class="des">身高170体重110,长年健身,希望你也...</p>
                </div>
              </div>

              <div class="tradeUser">
                <div class="ImgContainer">
                  <img
                    src="https://photo.zastatic.com/images/photo/463922/1855684997/44701748690645891.png?scrop=1&crop=1&cpos=north&w=100&h=100"
                    alt=""
                  />
                </div>

                <div class="userText">
                  <div class="userTextTitle">
                    <div class="userTextName">需要氧气</div>
                    <div class="icon iconfont iconhuangguanguanjun2x"></div>
                  </div>

                  <p class="attr">37岁&nbsp;&nbsp;&nbsp;168cm</p>

                  <p class="des">身高170体重110,长年健身,希望你也...</p>
                </div>
              </div>
            </div>
          </div>
          <div class="qustion">
            <div class="icon iconfont iconwenhao"></div>
            <div class="title">珍心回答</div>
            <div class="content hidden" ref="box">
              <p class="ques">已成功付费，但没有显示珍心会员图标怎么办？</p>
              <p class="answer">
                可将成功支付截图反馈给客服人员，让客服人员协助。
              </p>
              <p class="ques">是否可以随时退费？</p>
              <p class="answer">不能。</p>

              <p class="ques">开通珍心会员后成功率更高？</p>
              <p class="answer">
                珍心会员是相亲诚意的象征，在站内有更多的曝光机会，同时也会得到14项特权帮助
              </p>

              <p class="ques">没有网上银行如何购买珍心会员？</p>
              <p class="answer">
                可以银行转账汇款，详情咨询客服服务电话：4001-520-520
              </p>

              <p class="ques">珍心会员特权如何使用？</p>
              <p class="answer">开通即可使用全部珍心会员特权</p>

              <p class="ques">珍心会员发邮件需要珍爱币吗？</p>
              <p class="answer">不需要。珍心会员享受邮件畅聊特权。</p>
            </div>
            <div class="showMore" @click="handleClick(408)" v-if="flag">
              展开更多
            </div>
            <div class="showMore" @click="handleClick(115)" v-if="!flag">
              收起
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Caroucel from "../../components/Caroucel";

export default {
  name: "vip",
  data() {
    return {
      centerDialogVisible: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      flag: true,
    };
  },
  components: {
    Caroucel,
  },
  methods: {
    handleClick(height) {
      // console.log(this.$refs);
      this.$refs.box.style.height = `${height}px`;
      if (height === 408 || height === 115) this.flag = !this.flag;
    },
  },
};
</script>

<style lang="stylus" scoped>
*
  box-sizing border-box
.container
  position relative
  padding-top 100px
  padding-bottom 30px
  background #fafafa
.container::before
  content ''
  position absolute
  left 0
  top 0
  width 100%
  height 1780px
  background linear-gradient(
    135deg,
    #a893ff,
    #8f78ed
  )
.container::after
  content ''
  position absolute
  z-index 2
  left 0
  top 0
  width 100%
  height 1780px
.topIndex
  padding 30px 0 0
  width 1200px
  position relative
  margin 0 auto
  z-index 10
.sliber
  display flex
.bottomIndex
  margin 46px auto 0
  width 1200px
  position relative
  z-index 9
.f0::before
  clear both
  display table
  content ''
.f0::after
  clear both
  display table
  content ''
.container-flet
  width 880px
  margin 50px 0 0
.yuan
  float left
.container-right
  width 290px
  margin-left auto
  margin-right auto
  float right
.upper-half .cards
  position relative
  height 206px
  background #F3F3F3
  border-radius 6px 6px 0 0
.upper-half .cards .box
  position absolute
  left 0
  top 0
  width 100%
  margin-top -50px
.upper-half .cards .box::before
  clear both
  display table
  content ''
.upper-half .cards .box::after
  clear both
  display table
  content ''
.upper-half .cards .box .item
  position relative
  width 30%
  height 290px
  padding 16px
  margin-left 2.5%
  background #FFCF21
  border-radius 6px
  color #AF7A00
  text-align center
  transition transform 0.3s ease
.upper-half .cards .box .item:hover
  margin -20px 0 0 40px
  margin-left 2.5%
  transition transform 0.3s ease
.upper-half .cards .box .item.f1
  background-color #FFDD3C
.upper-half .cards .box .item .tag .im
  position absolute
  right 18px
  top 0
  width 38px
  height 35px
  background-size 100% 100%
.upper-half .cards .box .item.f1 .info
  background #FFEA00
.upper-half .cards .box .item .info
  height 100%
  background #F8F8F8
.upper-half .cards .item .type
  padding-top 27px
  font-size 20px
  line-height 21px
.upper-half .cards .item .dayPrice
  font-size 38px
  line-height 53px
.upper-half .cards .item.f1 .line
  background #DFBD00
.upper-half .cards .item .line
  display inline-block
  width 183px
  height 2px
  margin-top 4px
  background #DFCA99
.upper-half .cards .item .total
  margin-top 7px
  font-size 14px
.upper-half .cards .item .total .price
  font-size 32px
.upper-half .cards .item.f1 .info .btn
  background #fff
.upper-half .cards .item .btn
  display inline-block
  width 183px
  height 36px
  line-height 36px
  margin-top 15px
  background #FFD122
  font-size 14px
  cursor pointer
  border-radius 20px
  padding 0 0
  color #af7a00
.upper-half .cards .box .item.f2::before
  left 2px
  transform-origin 0 0
  transform rotate(45deg)
.upper-half .cards .box .item.f2::after
  right 2px
  transform-origin right top
  transform rotate(-45deg)
.upper-half .cards .box .item.f2::before
  content ''
  position absolute
  width 21px
  height 1px
  top 2px
  background #FFF1BE
.upper-half .cards .box .item.f2::after
  content ''
  position absolute
  width 21px
  height 1px
  top 2px
  background #FFF1BE
.upper-half .content
  position relative
  z-index 2
  padding-bottom 18px
  background #fff
  border-radius 0 0 6px 6px
  box-shadow 0 0px 4px #eaeaea
.upper-half .content .priovity
  padding-top 30px
.upper-half .content .priovity .title
  position relative
  text-align center
  line-height 25px
  color #E2AD43
  font-weight bold
.upper-half .content .priovity .title .border
  position absolute
  border-top 1px solid #EEBE5F
  top 12px
  width 40%
.upper-half .content .priovity .title .border::before
  content ''
  position absolute
  top -4px
  width 6px
  height 6px
  background #EEBE60
  transform rotate(45deg)
.upper-half .content .priovity .title .border1
  left 22px
.upper-half .content .priovity .title .border1::before
  right -16px
.upper-half .content .priovity .title .border2
  right 22px
.upper-half .content .priovity .title .border2::before
  left -16px
.upper-half .content .priovity .ctn
  line-height 16px
  font-size 13px
  color #666
  text-align center
  font-weight bold
  margin-top 30px
  margin-bottom 10px
.upper-half .content .priovity .ctn .item
  width 16%
.upper-half .content .priovity .ctn .item:nth-of-type(1) .img
  background-image url('https://i.zhenai.com/pc/portal/zhenxinMember/images/1.ac0113d.png')
.upper-half .content .priovity .ctn .item:nth-of-type(2) .img
  background-image url('https://i.zhenai.com/pc/portal/zhenxinMember/images/2.a2c4162.png')
.upper-half .content .priovity .ctn .item:nth-of-type(3) .img
  background-image url('https://i.zhenai.com/pc/portal/zhenxinMember/images/3.bce0a9a.png')
.upper-half .content .priovity .ctn .item:nth-of-type(4) .img
  background-image url('https://i.zhenai.com/pc/portal/zhenxinMember/images/4.161e42b.png')
.upper-half .content .priovity .ctn .item:nth-of-type(5) .img
  background-image url('https://i.zhenai.com/pc/portal/zhenxinMember/images/5.5371a1f.png')
.upper-half .content .priovity .ctn .item:nth-of-type(6) .img
  background-image url('https://i.zhenai.com/pc/portal/zhenxinMember/images/6.d426664.png')
.upper-half .content .priovity .ctn .item .img
  display inline-block
  width 79px
  height 79px
  margin-bottom 10px
  border-radius 50%
  background center center no-repeat rgba(255, 217, 88, 0.15)
  background-size 51px 51px
.upper-half .content .btn
  width 270px
  height 68px
  margin 74px auto
  text-align center
  font-size 24px
  color #333
  cursor pointer
  overflow hidden
  border-radius 34px
  overflow hidden \0
.upper-half .content .btn .box
  overflow hidden \0
  width 270px
  height 68px
  line-height 68px
  background linear-gradient(
    -135deg,
    #ffc21e,
    #fff62b
  )
  border-radius 34px
.upper-half .content .btn .price
  margin-left 20px
  font-size 22px
  color #86401B
.upper-half .content .btn .price .small
  font-size 12px
.upper-half .content .des
  padding 15px 22px
  margin 41px 18px 0
  border-radius 4px
  border 1px solid #ebebeb
  color #747478
  font-size 14px
  line-height 20px
.upper-half .content .des .title
  font-size 16px
  font-weight bold
  margin-bottom 8px
.upper-half .content .des .title.sase
  margin-top 32px
.container-right
  width 290px
  margin-left auto
  margin-right auto
  float right
.container-right .tuodan
  margin-bottom 30px
  background #fff
  border 1px solid #ebebeb
  color #666
  padding 21px 36px 36px
  border-radius 6px
.container-right .tuodan .title
  font-weight bold
  font-size 20px
  text-align center
.container-right .tuodan .title::before
  margin-right 5px
  background-position 0 0
.container-right .tuodan .title::after
  margin-left 5px
  background-position -28px 0
.container-right .tuodan .title::before
  content ''
  display inline-block
  width 24px
  height 23px
  background-repeat no-repeat
  background-size 54px 23px
  vertical-align bottom
  background-image url()
.container-right .tuodan .title .danger
  color #f5303d
.container-right .tuodan .ctn
  position relative
  margin-top 16px
  height 204px
  overflow hidden
.container-right .tuodan .ctn .users
  margin 0 0
  text-align center
.container-right .member
  background #fff
  border 1px solid #ebebeb
  color #666
  margin-bottom 30px
  padding 15px 18px 26px
  border-radius 6px
.container-right .member .title
  height 22px
  font-size 16px
  font-weight bold
.container-right .qustion
  background #fff
  border 1px solid #ebebeb
  color #666
  padding 14px
  border-radius 6px
.like
  background #fff
  color #666
  margin-bottom 30px
  padding 15px 18px 26px
  border-radius 6px
    .trade
      display flex
      align-items center
      p
        padding-left 5px
        font-size 14px
        color #8B76F9
        line-height 20px
        cursor pointer
  .tradeUser
    display flex
    margin-top 20px
    .ImgContainer
      img
        width 75px
        height 75px
        border-radius 6px
        background center center no-repeat
        background-size cover
    .userText
      width 160px
      margin-left 15px
      font-size 12px
      line-height 17px
      .userTextTitle
        display flex
        .userTextName
          font-size 14px
          color #666
          font-weight bold
        .icon
          width 16px
          height 16px
          padding-left 10px
    .attr
      margin-top 4px
      font-size 12px
      color #999
    .des
      font-size 12px
      color #666
      overflow hidden
      margin-top 4px
.qustion .icon
  width 16px
  height 16px
  display inline-block
  float left
  background 0 0 no-repeat
  background-size 100% 100%
  vertical-align baseline
.qustion .title
  font-weight bold
  font-size 16px
.qustion .content.hidden
  height 115px
  overflow hidden
.qustion .content
  line-height 17px
.qustion .content .ques
  margin-top 20px
  font-size 14px
.qustion .content .answer
  margin-top 6px
  font-size 12px
  color #999
.qustion .showMore
  padding-top 10px
  color #747478
  text-align right
  font-size 13px
  cursor pointer
</style>
